<template>
    <!--发布测试===测试概要====ZxReleaseHouseTest-->
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form v-model="upload">
                <el-form-item label="选择楼盘">
                    <!--action里面写上传的接口  即图片上传到哪里去
                        ref相当于给这个组件一个id-->
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            ref="upload"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
            </el-form>
            <el-form-item label="测评标题">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="测评总评">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="测评优点">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="测评缺点">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="买房提醒">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" :on-success="successImg">保存，并下一步</el-button>
                <el-button @click="clickBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ZxReleaseHouseDetail",

        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',

                },
                upload:[],
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        computed:{

        },
        created() {

        },
        methods: {
            /*点击图片上的小删除按钮  删除图片==方法*/
            handleRemove(file, fileList) {
               /* console.log(file, fileList);*/
            },
            /*点击图片上的预览按钮  预览图片==方法*/
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            /*点击 保存，并下一步 才将数据和图片传到后端*/
            onSubmit() {
               /* console.log('submit!');*/
                this.$refs.upload.submit();
                this.$store.dispatch('changactiveN','second')
               /* console.log(this.$store.state.MenuCount.changactiveN)
                this.$emit('tab-click','second')*/

            },
            /*文件上传成功时的钩子函数*/
            successImg(response, file, fileList){
               /* console.log(response)
                console.log(file)
                console.log(fileList)*/
            },
            clickBack(){
                this.$router.push({
                    name:'ZxHouseTest',
                    path:'/Home/ZxHousingManager/ZxHouseTest',
                    query: {

                    },
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form{
        width: 800px;
        .upload-demo{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    }
</style>